<template>
  <div class="serviceSet">
    <el-checkbox v-model="serviceChecked" size="small" @change="handleServiceChecked">客服组件</el-checkbox>
     <div class="btn-set-u" v-if="serviceChecked" @click="editorComponentFixed">【设置】</div>
  </div>
</template>
<script>
import * as WindowType from '@/config/windowtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import { mapState } from 'vuex'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
// import _ from 'lodash'

export default {
  props: {
    close: {
      type: Function,
      default: () => { }
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  data () {
    return {
      serviceChecked: false,
      bjComponent: null
    }
  },
  created () {
  },
  methods: {
    show () {
      this.bjComponent = BackendjsFunctions.getComponentFixedData()
      if (this.bjComponent._other._status === 0) {
        this.serviceChecked = true
      } else if (this.bjComponent._other._status === 4) {
        this.serviceChecked = false
      }
    },
    editorComponentFixed () {
      // 查看 iframe 是否存在，如果不存在直接return
      if (this.design.pageId < 1 || !this.design.pageId || !this.design.iframeSrc) {
        return
      }
      // 调用方法，显示弹窗
      VueFunctions.do(WindowType.EDIT_COMPONENT_WITH_COMPONENTFIXED)
      this.close()
    },
    handleServiceChecked () {
      if (this.serviceChecked) {
        this.bjComponent._other._status = 0
      } else {
        this.bjComponent._other._status = 4
      }
      BackendjsFunctions.saveComponentFixedData(this.bjComponent)
    }
  },
  components: {
  }
}
</script>
<style scoped lang="scss">
.serviceSet {
  position: relative;
  line-height: 2;
  margin-bottom: 5px;
  .btn-set-u {
    position: absolute;
    right:0;
    top: 0;
    cursor: pointer;
    &:hover {
      color:#258FFB;
    }
  }
}
</style>
